<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0 maximum-scale=1.0 minimum-scale=1.0">
  <meta name="keywords" content="happy">
  <meta name="Description" content="happy">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>张同学开心!!</title>
  <link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <script src="./lib/flexible.js"></script>
</head>

<body class="">
  <div class="audio-box">
    <audio src="./music/arcg.m4a" loop="" id="audio" preload="auto" autoplay></audio>
  </div>
  <div class="container">
    <div class="swiper-container">
      <div class="swiper-wrapper">

        <div class="swiper-slide">
          <div class="one">
            <div class="go">
              <h3 class="t-l">G</h3>
              <h3 class="t-r">O</h3>
            </div>
            <h2 class="t1">别</h2>
            <h2 class="t2">眨</h2>
            <h2 class="t3">眼</h2>

            <h2 class="all">各位</h2>
            <h2 class="me">绝美</h2>
            <h2 class="baby">张同学</h2>
            <h2 class="to">来了</h2>

            <div class="bg-white"></div>

            <div class="peo-box">
              <img src="./images/people/p2.png" alt="" class="p1">
              <img src="./images/people/peo-one.png" alt="" class="p2">
              <div class="flower1">
                <img src="./images/flower1.png" alt="" class="">
              </div>
              <div class="flower2">
                <img src="./images/flower2.png" alt="" class="">
              </div>
            </div>
            <img src="./images/one.png" alt="" class="one-bg">
            <div class="one-fb">
              <img src="./images/one-fb.png" alt="" class="">
            </div>
            <div class="one-ft">
              <img src="./images/one-ft.png" alt="" class="">
            </div>


            <div class="one-icon">
              <img src="./images/one-icon.png" alt="">
            </div>
            <div class="one-icon2">
              <img src="./images/one-icon2.png" alt="">
            </div>


            <div class="one-up">
              <img src="./images/up.png" alt="">
              <p>向上滑动</p>
            </div>
          </div>
        </div>

        <div class="swiper-slide">
         <div class="two">
          <div class="two-tl">
            <img src="./images/two-tl.png" alt="" class="">
          </div>
          <div class="two-tr">
            <img src="./images/two-tr.png" alt="" class="">
          </div>
          <img src="./images/two-flower.png" alt="" class="two-flower">

          <img src="./images/two-bot.png" alt="" class="two-bot">
          <img src="./images/people/two-p1.png" alt="" class="two-p1">
          <!-- <img src="./images/people/two-p2.png" alt="" class="two-p2"> -->
          <img src="./images/people/two-p4.png" alt="" class="two-p4">
          <img src="./images/people/two-p3.png" alt="" class="two-p3">


          <img src="./images/two-icon1.png" alt="" class="icon1">
          <img src="./images/two-icon2.png" alt="" class="icon2">
          <img src="./images/two-icon3.png" alt="" class="icon3">
         </div>
        </div>

        <div class="swiper-slide">
          <div class="three">
            <img src="./images/three-bot.png" alt="" class="three-bot">

            <img src="./images/three-top.png" alt="" class="three-top">
            <img src="./images/three-bg.png" alt="" class="three-bg">
            <img src="./images/three-icon2.png" alt="" class="three-icon2">
            <div class="three-p3">
              <img src="./images/people/three-p3.png" alt="" class="tp">
              <img src="./images/three-peob.png" alt="" class="peo-bottom">
            </div>
            <img src="./images/people/three-p1.png" alt="" class="three-p1">
            <img src="./images/people/three-p2.png" alt="" class="three-p2">

           
          </div>
        </div>

        <div class="swiper-slide">
          <div class="four">
            <img src="./images/four-bg.png" alt="" class="bg1">
            <img src="./images/four-bg2.png" alt="" class="bg2">
            <img src="./images/four-bg3.png" alt="" class="bg3">


            <div class="icon1">
              <img src="./images/four-1.png" alt="" class="">
            </div>
            <img src="./images/four-2.png" alt="" class="icon2">
            <img src="./images/four4.png" alt="" class="icon4">
            <div class="icon3">
              <img src="./images/four3.png" alt="" class="">
            </div>

            <div class="icon5">
              <img src="./images/four5.png" alt="" class="">
            </div>
            <div class="p1">
              <img src="./images/people/four-p1.png" alt="" class="peo-1">
              <img src="./images/four6.png" alt="" class="four6">
            </div>
           
            <img src="./images/people/four-p3.png" alt="" class="p3">
            <img src="./images/people/four-p4.png" alt="" class="p4">

          
         
          </div>
        </div>

        <!-- <div class="swiper-slide">
          <div class="six">
            <img src="./images/six-l.png" alt="" class="six-l">
            <img src="./images/six-r.png" alt="" class="six-r">
            <img src="./images/six-cen.png" alt="" class="six-cen">
            
            <img src="./images/people/six-p2.png" alt="" class="six-p2">
            <img src="./images/people/six-p3.png" alt="" class="six-p3">
    
            <img src="./images/people/six-p1.png" alt="" class="six-p1">
            <div class="six-p4">
              <img src="./images/people/six-p5.png" alt="" class="sp4">
              <img src="./images/six-king.png" alt="" class="king">
            </div>
            <img src="./images/people/six-p6.png" alt="" class="six-p5">
          </div>
        </div> -->
        <div class="swiper-slide">
          <div class="seven">
           <div class="seven-box">
            <div class="text-box">
              <p>不希望你总是累累的,希望你好好吃饭,好好睡觉,每天开开心心.</p>
              <p>可以遇见你真的很开心,也希望你能一直开心下去.</p>
              <p>生活原本沉闷,但跑起来一定有风,祝你总有温柔相伴,要每天开心啊张同学!!!</p>
            </div>
            <img src="./images/email.png" alt="" class="email">
           </div>

           <img src="./images/people/seven-p1.png" alt="" class="seven-p1">
           <!-- <img src="./images/people/first-p.png" alt="" class="seven-p2"> -->

         
          </div>
        </div>

      </div>
    </div>
  </div>

</body>
<script src="./lib/jquery-3.1.1.min.js"></script>
<script src="./lib/swiper/js/swiper.min.js"></script>
<script>
   $(document).ready(function () {

    $(".audio-box").addClass("play")
    console.log($("#audio")[0]);
    $("#audio")[0].play()

    $(".audio-box").click(function () {
      $(this).hasClass("play") ? ($(this).removeClass("play"), $("#audio")[0].pause()) : ($(this).addClass(
        "play"), $(
        "#audio")[0].play());
    })

    function audioAutoPlay(id) {
      var audio = document.getElementById(id);
      audio.play();
      document.addEventListener("WeixinJSBridgeReady", function () {
        audio.play();
      }, false);
      document.addEventListener('YixinJSBridgeReady', function () {
        audio.play();
      }, false);
    }

    if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
      document.addEventListener('WeixinJSBridgeReady', audioAutoPlay("audio"), false);
    } else {
      audioAutoPlay("audio")
    }

    var mySwiper = new Swiper('.swiper-container', {
      direction: 'vertical', // 垂直切换选项
      mousewheel: true,
      initialSlide: 0,
      effect: 'coverflow',
      speed: 1000,
      on :{
        init: function(swiper){
          // $("#audio")[0].src = './music/music.mp3'
          // $("#audio")[0].play()
      },
      slideChangeTransitionEnd: function(){
        // alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
        console.log(this.activeIndex);
      if (this.activeIndex === 0) {
        $("#audio")[0].src = './music/arcg.m4a'
      }
      if (this.activeIndex === 1) {
        $("#audio")[0].src = './music/qunqing_2_1.mp3'
      } 
       if (this.activeIndex === 2) {
        $("#audio")[0].src = './music/is it_1.mp3'
      }
       if (this.activeIndex === 3) {
        $("#audio")[0].src = './music/hali.m4a'
      }
       if (this.activeIndex === 4) {
        $("#audio")[0].src = './music/shuh.m4a'
      }
       if (this.activeIndex === 5) {
        $("#audio")[0].src = './music/riyu.m4a'
      }
     
      
      },
    }
    },
    )
});

  //   结束后  触发
//   var mySwiper = new Swiper('.swiper',{
//   on: {
//     slideChangeTransitionEnd: function(){
//       alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
//     },
//   },
// })

// 首页 √
// 樱花 √
// 卡通
// 万圣节
// 英伦
// 信封
</script>
</html>